<template>
	<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="用户昵称" prop="username" class="iib">
			<el-input type="text" v-model="ruleForm.username" autocomplete="off" clear="ipt"></el-input>
		</el-form-item>
		<el-form-item label="手机号码" prop="phone">
			<el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="部门">
			<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
				<el-option label="财务部" value="caiwu"></el-option>
				<el-option label="技术部" value="jishu"></el-option>
				<el-option label="后勤部" value="houqin"></el-option>
				<el-option label="营销部" value="营销"></el-option>
				<el-option label="人事部" value="renshi"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="性别">
			<el-radio-group v-model="ruleForm.resource">
				<el-radio label="男"></el-radio>
				<el-radio label="女"></el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	name: 'Forms',
	data() {
		// 用户名验证规则
		var validateUsername = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入用户名'));
			} else {
				callback()
			}
		};
		// 手机号验证规则
		var validatePhone = (rule, value, callback) => {
			const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
			if (value === '') {
				callback(new Error('请输入手机号'));
			} else if(regMobile.test(value)){
				callback();
			} else {
				callback(new Error('请输入合法的手机号'))
			}
		};
		return {
			ruleForm: {
				username: '', // 用户名
				phone: '',  // 手机号
				resource:'', // 选择男女
				region:'' // 选择的区域
			},
			rules: {
				username: [
					{ validator: validateUsername, trigger: 'blur' }
				],
				phone: [
					{ validator: validatePhone, trigger: 'blur' }
				]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$store.commit('saveHead',this.ruleForm.region)
					this.$store.commit('savePhone', this.ruleForm.phone)
					this.$store.commit('saveUsername',this.ruleForm.username)
					this.$message({
						message:'修改信息成功',
						type:'success'
					})
				} else {
					this.$message.error('修改信息失败')
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.ruleForm.resource = ''
			this.ruleForm.region = ''
		}
	}
}
</script>

<style>
/* .item_i > .el-form-item__content{
display: flex;
}
.el-input{
	width: auto;
} */
 .el-input{
	width: 300px;
}
</style>